<template>
  <div id="samstoHome">

    <el-row :gutter="20" justify="space-between" class="prefixCls">
      <el-col :span='4'>
        <el-card shadow="hover" class="mb-20px">
          <el-skeleton :loading="loading" animated :rows="2">
            <template #default>
              <div class="prefixCls__item flex justify-between">
                <div>
                  <div
                    class="prefixCls__item--icon prefixCls__item--peoples p-16px inline-block rounded-6px"
                  >
                    <el-avatar shape="square" :size="60" :src="getAssetsFile('images/samsto/storage.png')"/>
                  </div>
                </div>
                <div class="flex flex-col justify-between">
                  <div class="prefixCls__item--text text-16px text-gray-500 text-right">
                    今日存入
                  </div>
                  <span class="text-20px font-700 text-right">
                    90
                  </span>
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :span='4'>
        <el-card shadow="hover" class="mb-20px">
          <el-skeleton :loading="loading" animated :rows="2">
            <template #default>
              <div class="prefixCls__item flex justify-between">
                <div>
                  <div
                    class="prefixCls__item--icon prefixCls__item--message p-16px inline-block rounded-6px"
                  >
                    <el-avatar shape="square" :size="60" :src="getAssetsFile('images/samsto/lend.png')" />
                  </div>
                </div>
                <div class="flex flex-col justify-between">
                  <div class="prefixCls__item--text text-16px text-gray-500 text-right">
                    在借标本
                  </div>
                  <span class="text-20px font-700 text-right">
                    12
                  </span>
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :span='4'>
        <el-card shadow="hover" class="mb-20px">
          <el-skeleton :loading="loading" animated :rows="2">
            <template #default>
              <div class="prefixCls__item flex justify-between">
                <div>
                  <div
                    class="prefixCls__item--icon prefixCls__item--money p-16px inline-block rounded-6px"
                  >
                    <el-avatar shape="square" :size="60" :src="getAssetsFile('images/samsto/in_storage.png')" />
                  </div>
                </div>
                <div class="flex flex-col justify-between">
                  <div class="prefixCls__item--text text-16px text-gray-500 text-right">
                    在存标本
                  </div>
                  <span class="text-20px font-700 text-right">
                    310
                  </span>
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>

      <el-col :span='4'>
        <el-card shadow="hover" class="mb-20px">
          <el-skeleton :loading="loading" animated :rows="2">
            <template #default>
              <div class="prefixCls__item flex justify-between">
                <div>
                  <div
                    class="prefixCls__item--icon prefixCls__item--shopping p-16px inline-block rounded-6px"
                  >
                    <el-avatar shape="square" :size="60" :src="getAssetsFile('images/samsto/destroy.png')" />
                  </div>
                </div>
                <div class="flex flex-col justify-between">
                  <div class="prefixCls__item--text text-16px text-gray-500 text-right">
                    销毁数量
                  </div>
                  <span class="text-20px font-700 text-right">
                    1766
                  </span>
                </div>
              </div>
            </template>
          </el-skeleton>
        </el-card>
      </el-col>
      <el-col :span='6'></el-col>
    </el-row>

    <el-row>
      <el-col :span='14'>
        <el-card style="max-width: 99%">
          <template #header>
            <div class="card-header">
              <span>存入趋势</span>
            </div>
          </template>
          <div id='samstoHome1' style='width: 100%;height: 400px'></div>
        </el-card>
      </el-col>
      <el-col :span='7'>
        <el-card style="max-width: 99%">
          <template #header>
            <div class="card-header">
              <span>存储情况</span>
            </div>
          </template>
          <div id='samstoHome2' style='width: 100%;height: 400px'></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style='height: 20px'></el-row>
    <el-row>
      <el-col :span='7'>
        <el-card style="max-width: 98%">
          <template #header>
            <div class="card-header">
              <span>在存类型统计</span>
            </div>
          </template>
          <div id='samstoHome3' style='width: 100%;height: 400px'></div>
        </el-card>
      </el-col>
      <el-col :span='7'>
        <el-card style="max-width: 98%">
          <template #header>
            <div class="card-header">
              <span>借出统计</span>
            </div>
          </template>
          <div id='samstoHome4' style='width: 100%;height: 400px'></div>
        </el-card>
      </el-col>
      <el-col :span='7'>
        <el-card style="max-width: 98%">
          <template #header>
            <div class="card-header">
              <span>销毁统计</span>
            </div>
          </template>
          <div id='samstoHome5' style='width: 100%;height: 400px'></div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, watch, onMounted, toRefs } from 'vue';
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store';
import * as echarts from 'echarts';
import {  IsEmpty,getAssetsFile } from '@/utils/common';
let store = AppStore();
/**切换仓库弹窗组件对象 */

const loading = ref(true)
 type EChartsOption = echarts.EChartsOption;
 let option: EChartsOption;
 let option2: EChartsOption;
 let option3: EChartsOption;
 let option4: EChartsOption;
 let option5: EChartsOption;

onMounted(() => {
  loading.value=false;

  let chartDom = document.getElementById('samstoHome1')!;
  let myChart = echarts.init(chartDom);

  option=  {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['10-21', '10-22', '10-23', '10-24', '10-25', '10-26', '10-27'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [45, 32, 53, 46, 66, 71, 31],
        itemStyle: {
          color: '#98D87DFF'
        }
      }
    ]
  };
  option && myChart.setOption(option);

  option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['检验科仓库', '消化科仓库', '发热仓库', '生殖科仓库', '消化道仓库', '创伤科仓库']
    },
    series: [
      {
        type: 'bar',
        data: [388, 277, 123, 101, 90, 78]
      }
    ]
  };

  let chartDom2 = document.getElementById('samstoHome2')!;
  let myChart2 = echarts.init(chartDom2);
  option2 && myChart2.setOption(option2);

  option3 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '75%'],
        data: [
          { value: 1048, name: '血清' },
          { value: 735, name: '指尖血' },
          { value: 580, name: '尿液' },
          { value: 484, name: '活检' },
          { value: 300, name: '动物血' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  let chartDom3 = document.getElementById('samstoHome3')!;
  let myChart3 = echarts.init(chartDom3);
  option3 && myChart3.setOption(option3);

  option4={
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '75%',
        data: [
          { value: 104, name: '血清' },
          { value: 73, name: '动脉血' },
          { value: 58, name: '尿液' },
          { value: 48, name: '指尖血' },
          { value: 30, name: '活检' }
        ]
      }
    ]
  };
  let chartDom4 = document.getElementById('samstoHome4')!;
  let myChart4 = echarts.init(chartDom4);
  option4 && myChart4.setOption(option4);

  option5={
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['活检', '血清', '指尖血', '尿液', '血清', '腹水', '胆汁'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]};
  let chartDom5 = document.getElementById('samstoHome5')!;
  let myChart5 = echarts.init(chartDom5);
  option5 && myChart5.setOption(option5);
});
</script>
<style lang="scss" scoped>
#samstoHome {
  *, :after, :before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  //width: 100%;
  padding: 20px;

  .mb-20px {
    margin-bottom: 20px;
  }
  .card-header span{
    font-weight: 700;
    font-size: 16px;
  }
  .text-gray-500 {
    --un-text-opacity: 1;
    //color: rgb(107 114 128 / var(--un-text-opacity));
    padding-right: 10px;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #989898;
  }
  .font-size-16px, .text-16px {
    font-size: 16px;
  }
  .text-right {
    text-align: right;
    padding-right: 32px;
  }
  .font-700, .font-bold {
    color: #afabab;
    font-weight: 700;
  }
  .text-20px {
    font-size: 32px;
  }
  .text-right {
    text-align: right;
  }
  .justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
.prefixCls {
  .prefixCls__item {
    .prefixCls__item--peoples {
    color: #40c9c6;
  }

    .prefixCls__item--message {
    color: #36a3f7;
  }

    .prefixCls__item--money {
    color: #f4516c;
  }

    .prefixCls__item--shopping {
    color: #34bfa3;
  }

    .prefixCls__item:hover {
      :deep(.user-icon) {
    color: #fff !important;
    }
  .prefixCls__item--icon {
  transition: all 0.38s ease-out;
  }
  .prefixCls__item--peoples {
  background: #40c9c6;
  }
  .prefixCls__item--message {
  background: #36a3f7;
  }
  .prefixCls__item--money {
  background: #f4516c;
  }
  .prefixCls__item--shopping {
  background: #34bfa3;
  }
  }
}
}
}
</style>
